<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head>
    <th:block th:include="include :: header('推荐管理')" />
    <th:block th:include="include :: layout-latest-css" />
    <th:block th:include="include :: ztree-css" />
</head>
<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 文章分类
                </div>
                <div class="box-tools pull-right">
                    <a type="button" class="btn btn-box-tool menuItem" href="#"
                       onclick="dept()" title="分类管理"><i class="fa fa-edit"></i></a>
                    <button type="button" class="btn btn-box-tool" id="btnExpand"
                            title="展开" style="display: none;">
                        <i class="fa fa-chevron-up"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnCollapse"
                            title="折叠">
                        <i class="fa fa-chevron-down"></i>
                    </button>
                    <button type="button" class="btn btn-box-tool" id="btnRefresh"
                            title="刷新分类">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
            </div>
            <div class="ui-layout-content">
                <div id="tree" class="ztree"></div>
            </div>
        </div>
    </div>
</div>

<div class="container-div ui-layout-center">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="user-form">
                <input type="hidden" id="catId" name="catId"> <input
                    type="hidden" id="parentId" name="parentId">
                <div class="select-list">
                    <ul>
                        <li>文章标题：<input type="text" placeholder="文章标题"
                                        name="articleTitle" />
                        </li>
                        <li>文章ID：<input type="text" placeholder="文章ID"
                                        name="articleId" />
                        </li>
                        <li>创建ID：<input type="text" placeholder="创建人ID"
                                        name="createBy" />
                        </li>
                        <li>文章状态：<select name="visible">
                            <option value="">所有</option>
                            <option value="0">待审核</option>
                            <option value="1">未通过</option>
                            <option value="2">已通过</option>
                        </select>
                        </li>
                        <li>文章类型：<select name="articleType">
                            <option value="">所有</option>
                            <option value="0">博文</option>
                            <option value="1">教材</option>
                            <option value="2">图集</option>
                            <option value="3">问答</option>
                            <option value="4">投票</option>
                        </select>
                        </li>
                        <li class="select-time"><label>创建时间： </label> <input
                                type="text" class="time-input" id="startTime" placeholder="开始时间"
                                name="params[beginTime]" /> <span>-</span> <input type="text"
                                                                                  class="time-input" id="endTime" placeholder="结束时间"
                                                                                  name="params[endTime]" /></li>
                        <li><a class="btn btn-primary btn-rounded btn-sm"
                               onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm"
                               onclick="reloadForm()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="$.operate.addTab()"
               shiro:hasPermission="cms:article:add"> <i class="fa fa-plus"></i>
                新增
            </a> <a class="btn btn-primary btn-edit disabled"
                    onclick="$.operate.editTab()"
                    shiro:hasPermission="cms:article:edit"> <i class="fa fa-edit"></i>
                修改
        </a> <a class="btn btn-danger btn-del disabled"
                onclick="$.operate.removeAll()"
                shiro:hasPermission="cms:article:remove"> <i
                class="fa fa-remove"></i> 删除
        </a> <a class="btn btn-info" onclick="$.table.importExcel()"
                shiro:hasPermission="cms:article:import"> <i
                class="fa fa-upload"></i> 导入
        </a> <a class="btn btn-warning" onclick="$.table.exportExcel()"
                shiro:hasPermission="cms:article:export"> <i
                class="fa fa-download"></i> 导出
        </a>
        </div>

        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<th:block th:include="include :: footer" />
<th:block th:include="include :: layout-latest-js" />
<th:block th:include="include :: ztree-js" />
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('cms:article:edit')}]];
    var removeFlag = [[${@permission.hasPermi('cms:article:remove')}]];
    var viewFlag=[[${@permission.hasPermi('cms:article:view')}]];
    var datas = [[${@dict.getType('sys_normal_disable')}]];
    var prefix = ctx + "cms/article";

    $(function() {
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        $('body').layout({ initClosed: panehHidden, west__size: 185 });
        queryUserList();
        queryDeptTree();
    });

    function queryUserList() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            importUrl: prefix + "/importData",
            importTemplateUrl: prefix + "/importTemplate",
            sortName: "createTime",
            sortOrder: "desc",
            modalName: "推荐列表",
            columns: [{
                checkbox: true
            },
                {
                    field: 'articleId',
                    title: '文章id'
                },
                {
                    field: 'articleTitle',
                    title: '文章标题',
                    formatter:function(value, row, index) {
                        if(value.length>12){
                            return '<a href="#" title="'+value+'">'+value.substring(0,12)+'..</a>';
                        }
                        else
                        {
                            return '<a href="#" title="'+value+'">'+value+'</a>';
                        }
                    }
                },
                {
                    field: 'articleTop',
                    title: '顶置级别'
                },
                {
                    visible: editFlag == 'hidden' ? false : true,
                    title: '状态',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var pam={};
                        pam["articleId"]=row.articleId;
                        if (row.visible == 1) {
                            pam['visible']=0;
                            pam=JSON.stringify(pam).replace(/\"/g,"'");
                            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(' + pam+ ')"></i> ';
                        } else {
                            pam['visible']=1;
                            pam=JSON.stringify(pam).replace(/\"/g,"'");
                            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(' + pam + ')"></i> ';
                        }
                    }
                },
                {
                    visible: editFlag == 'hidden' ? false : true,
                    title: '是否允许评论',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var pam={};
                        pam["articleId"]=row.articleId;
                        if (row.allowComment == 1) {
                            pam['allowComment']=0;
                            pam=JSON.stringify(pam).replace(/\"/g,"'");
                            return '<i class=\"fa fa-toggle-on text-info fa-2x\" onclick="disable(' + pam+ ')"></i> ';
                        } else {
                            pam['allowComment']=1;
                            pam=JSON.stringify(pam).replace(/\"/g,"'");
                            return '<i class=\"fa fa-toggle-off text-info fa-2x\" onclick="enable(' + pam + ')"></i> ';
                        }
                    }
                },
                {
                    field: 'articleType',
                    title: '文章类型',
                    formatter: function(value, item, index) {
                        if (item.articleType == 0) {
                            return '<span class="label label-danger">博文</span>';
                        }
                        else if (item.articleType == 1) {
                            return '<span class="label label-warning">教程</span>';
                        }
                        else if (item.articleType == 2) {
                            return '<span class="label label-primary">图集</span>';
                        }
                        else if (item.articleType == 3) {
                            return '<span class="label label-success">问答</span>';
                        }
                        else if (item.articleType == 4) {
                            return '<span class="label label-info">投票</span>';
                        }
                    }
                },
                {
                    field: 'createBy',
                    title: '创建人Id'
                },
                {
                    field: 'createTime',
                    title: '创建时间',
                    sortable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="#" onclick="$.operate.editTab(\'' + row.articleId + '\')"><i class="fa fa-edit"></i>编辑</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="#" onclick="$.operate.remove(\'' + row.articleId + '\')"><i class="fa fa-remove"></i>删除</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }

    function queryDeptTree()
    {
        var url = "/cms/article/catTreeData";
        var options = {
            url: url,
            expandLevel: 2,
            onClick : zOnClick
        };
        $.tree.init(options);

        function zOnClick(event, treeId, treeNode) {
            $("#catId").val(treeNode.id);
            $("#parentId").val(treeNode.pId);
            $.table.search();
        }
    }

    $('#btnExpand').click(function() {
        $._tree.expandAll(true);
        $(this).hide();
        $('#btnCollapse').show();
    });

    $('#btnCollapse').click(function() {
        $._tree.expandAll(false);
        $(this).hide();
        $('#btnExpand').show();
    });

    $('#btnRefresh').click(function() {
        $('#catId').val('');
        queryDeptTree();
    });

    /* 分类管理-类目列表 */
    function dept() {
        var url = ctx + "cms/cat";
        createMenuItem(url, "分类管理");
    }

    /*刷新表单*/
    function reloadForm(){
        $.form.reset()
        $('#catId').val('');
        queryDeptTree();
    }




    /* xxx-停用 */
    function disable(pam) {
        $.modal.confirm("确认要停用吗？", function() {

            $.operate.post(prefix + "/edit", pam);
        })
    }

    /* xxx-启用 */
    function enable(pam) {
        $.modal.confirm("确认要启用吗？", function() {
            $.operate.post(prefix + "/edit", pam);
        })
    }
</script>
</body>
<form id="importForm" enctype="multipart/form-data" class="mt20 mb10"
      style="display: none;">
    <div class="col-xs-offset-1">
        <input type="file" id="file" name="file" />
        <div class="mt10 pt5">
            <input type="checkbox" id="updateSupport" name="updateSupport"
                   title="如果登录账户已经存在，更新这条数据。"> 是否更新已经存在的用户数据 &nbsp; <a
                onclick="$.table.importTemplate()" class="btn btn-default btn-xs"><i
                class="fa fa-file-excel-o"></i> 下载模板</a>
        </div>
        <font color="red" class="pull-left mt10">
            提示：仅允许导入“xls”或“xlsx”格式文件！ </font>
    </div>
</form>
</html>